<template>
  <!-- 面试技巧 -->
  <div class="container">
    <el-card shadow="never">
      <!-- -------   头部    ------ -->
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <!-- 给form表单以及输入框绑定data中的值 -->
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label-width="80px" label="关键字">
                <el-input size="small" v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
              </el-form-item>
              <el-form-item label-width="80px" label="状态">
                <el-select size="small" v-model="page.state" placeholder="请选择">
                  <!-- <el-option label="启用" value="shanghai"></el-option>
                  <el-option label="禁用" value="beijing"></el-option>-->

                  <el-option
                    v-for="item in enumeration.status"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <!-- 给清除一个点击事件，讲form表单中的input值清空 -->
                <el-button size="small" @click="empty">清除</el-button>
                <el-button size="small" type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col style="text-align: right" :span="8">
          <div class="grid-content bg-purple">
            <el-button size="small" type="success" @click="skills">
              <i class="el-icon-edit"></i>
              <span>新增技巧</span>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 提示信息 -->
      <el-alert
        style="margin-bottom: 18px"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- table 表格 -->
      <!-- 给表格绑定 后台返回的数值 给每一个表格 -->
      <el-table :data="articles">
        <el-table-column prop="index" width="80px" type="index" label="序号" />
        <el-table-column width="400px" prop="title" label="文章标题">
          <template v-slot="{row}">
            <span>{{row.title}}</span>
            <a @click="bofang(row.videoURL)" href="#" :class="row.videoURL ? 'el-icon-film' : ''"></a>
          </template>
        </el-table-column>
        <el-table-column width="170px" prop="visits" label="阅读数" />
        <el-table-column width="170px" prop="username" label="录入人" />
        <el-table-column width="170px" label="录入时间" align="center">
          <!-- 作用域插槽将时间格式化,引用注册号的时间过滤器 -->
          <template slot-scope="{ row }">
            {{
            row.createTime | parseTimeByString
            }}
          </template>
        </el-table-column>
        <el-table-column width="100px" prop="enableState" label="状态">
          <template slot-scope="{ row }">
            <!-- 根据当前状态来确定 是否打开开关 ,后台返回的state的值-->
            {{row.state === 1 ? '已启用' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="preview(row)">预览</el-button>
            <!-- 判断传入的值为0还是1 显示启用或者禁用
            给一个点击事件 传入row，之间中根据 id 和state 来修改文章状态
            -->
            <el-button
              type="text"
              size="small"
              @click="changeState(row)"
            >{{row.state === 0? '启用':'禁用'}}</el-button>
            <el-button type="text" size="small" :disabled="row.state === 0" @click="Modify(row)">修改</el-button>
            <!-- 当返回的state值 为0时 修改和删除 为禁用状态
            传入数据中的id 以删除当前点击的项
            -->
            <el-button
              type="text"
              size="small"
              :disabled="row.state === 0"
              @click="delemove(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ---   分页   ---- -->
      <!-- 给切换当前页 和一个显示数据的条数 一个事件 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        :page-size="page.pagesize"
        :current-page="page.page"
        :total="total"
        layout="prev,pager,next,sizes,jumper"
        :page-sizes="[6, 10, 20, 50]"
        @current-change="changePage"
        @size-change="sizepage"
        v-if="paging"
      ></el-pagination>
    </el-card>

    <!-- 新增和编辑弹层 -->
    <articlesAdd ref="thickn" :showDlog.sync="showDlog" @share="getList"></articlesAdd>

    <!-- 预览弹层 -->
    <articlesPreview ref="Prev" :showPrev.sync="showPrev"></articlesPreview>

    <!-- 预览视频弹层 -->
    <!-- <el-dialog :visible="shiping" @close="guanbi" width="800px" style="margin-top:5vh">
      <video :src="videoURL" autoplay style="width:100%;"></video>
      <el-button
        @click="guanbi"
        class="tubiaoya"
        size="medium"
        icon="el-icon-error"
        circle
        type="info"
      ></el-button>
    </el-dialog>-->
    <vidoo :videoURL="videoURL" :shiping="shiping" @guanbi="guanbi"></vidoo>
  </div>
</template>

<script>
// 导入获取文章、删除文章、修改文字状态接口
import { list, remove, changeState } from "@/api/hmmm/articles";
import articlesAdd from "../components/articles-add"; // 引入添加、新增组件
import articlesPreview from "../components/articles-preview"; // 引入预览组件
import enumeration from "@/api/base/baseApi"; // 调用枚举的方法
import vidoo from "./components/vidoo";
export default {
  data() {
    return {
      articles: [], // 存放后台接口返回的数据
      page: {
        // 用于绑定分页的数值
        page: 1, // 当前页数
        pagesize: 10, //页尺寸
        keyword: "", // 关键字
        state: null // 状态1开启 0禁用
      },
      total: 0, // 显示返回数据的总数
      showDlog: false, // 控制 新增/编辑弹层的显示
      showPrev: false, // 控制预览弹层的显示
      enumeration, // 用于 枚举
      paging: true, // 控制分页的显示
      shiping: false, // 控制播放弹层的关闭
      videoURL: "" // 用于存放播放视频的地址
    };
  },
  created() {
    // 调用获取文章列表
    this.getList();
  },
  components: {
    articlesAdd,
    articlesPreview,
    vidoo
  },
  methods: {
    // 给播放图标点击事件，传入里面的url地址，并且打开弹层
    bofang(url) {
      this.videoURL = url;
      this.shiping = true;
    },
    // 关闭视频弹层，并且清空url地址
    guanbi() {
      this.shiping = false;
      this.videoURL = "";
    },
    // 根据后台接口 传入 分页的值 来获取后台的数据,存放在data中(获取文章列表)
    async getList() {
      // this.page
      const { data } = await list(this.page);
      this.articles = data.items;
      this.total = data.counts;
    },
    // 切换 一页的条数
    changePage(newPage) {
      this.page.page = newPage;
      this.getList();
    },
    // 切换 到分页
    sizepage(pageSize) {
      this.page.pagesize = pageSize;
      this.getList();
    },
    // 清空form 中input的值
    empty() {
      this.page.keyword = ""; // 关键字
      this.page.state = null; // 状态1开启 0禁用
    },
    // 删除文章操作
    async delemove(row) {
      await this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      await remove(row);
      this.$message.success("删除成功");
      this.getList();
      // try {
      //   await this.$confirm("您确定删除吗");
      //   await remove(row);
      //   this.$message.success("删除成功");
      //   this.getList();
      // } catch (error) {
      //   console.log(error);
      // }
    },
    // 切换当前文章的状态 是否是 启用还是禁用状态
    async changeState(row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        });
        this.$message.success("操作成功");
        row.state = row.state === 1 ? 0 : 1;
      } catch (error) {
        console.log(error);
      }
    },
    // 搜索按钮
    async search() {
      try {
        const { data } = await list(this.page);
        this.articles = data.items;
        this.total = data.counts;
        this.$message.success("搜索成功");
        // 判断分页
        if (this.page.state) {
          this.paging = false;
        } else {
          this.paging = true;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 新增
    skills() {
      this.showDlog = true;
    },
    // 修改
    async Modify(row) {
      await this.$refs.thickn.detail(row);
      this.showDlog = true;
      // this.page.page = 1;
      this.getList();
    },
    // 预览
    preview(row) {
      this.showPrev = true;
      this.$refs.Prev.detail(row);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-icon-film {
  color: blue;
  font-size: 18px;
}
</style>
